import { Button, message } from 'antd';

import type { FC } from 'react';

import infoBack from '@/assets/images/infoBack.png';
import BaseDiv from '@/components/baseDiv';

import styles from './index.less';

const Info1: FC = () => {
  const baseStyles: React.CSSProperties = {
    height: 520,
    backgroundImage: `url(${infoBack})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: '100% 100%',
  };

  return (
    <BaseDiv
      baseStyles={baseStyles}
      boxStyles={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}
    >
      <div className={styles.titleContent}>异常事件 快速响应</div>

      <div className={styles.textContent}>提高效率 消除浪费 纠正缺陷 创造价值</div>
      <div style={{ height: 180 }} />
      <div className={styles.buttonContent}>
        <Button type="default" ghost onClick={() => { message.info('暂无此功能');}}>
          立刻体验
        </Button>
      </div>
    </BaseDiv>
  );
};

export default Info1;
